<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通讯录</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <h1>通讯录</h1>
    <form action="{{ url_for('add_contact') }}" method="post">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" required>
        <label for="phone">电话号码:</label>
        <input type="tel" id="phone" name="phone" required>
        <button type="submit">添加联系人</button>
    </form>
    
    <h2>联系人列表</h2>
    <form action="{{ url_for('index') }}" method="get">
        <label for="sort_by">排序方式:</label>
        <select id="sort_by" name="sort_by">
            <option value="name" {% if sort_by == 'name' %}selected{% endif %}>按首字母</option>
            <option value="time" {% if sort_by == 'time' %}selected{% endif %}>按添加时间</option>
        </select>
        <button type="submit">排序</button>
    </form>
    <ul>
        {% for name, info in contacts.items() %}
            <li>
                {{ name }} - {{ info['phone'] }}
                <form action="{{ url_for('edit_contact', name=name) }}" method="get" style="display:inline;">
                    <button type="submit">编辑</button>
                </form>
                <form action="{{ url_for('delete_contact', name=name) }}" method="post" style="display:inline;">
                    <button type="submit">删除</button>
                </form>
                <small>添加时间: {{ info['time'].strftime('%Y-%m-%d %H:%M:%S') }}</small>
            </li>
        {% else %}
            <li>没有联系人。</li>
        {% endfor %}
    </ul>
</body>
</html>